<template>
  <div>
    <div class="code-content" v-highlight style="height: 0" ref="codeContent">
      <div class="code-content-height" ref="codeContentHeight">
        <div class="code-user-desc" v-if="showCodeDesc"><p v-html="codeDesc"></p></div>
        <pre><code class="html">{{ codeStr }}</code></pre>
      </div>
    </div>
    <div class="lock-code" @click="showCode" ref="xxx" v-if="showToggle">
      <!-- <h-icon
        class="icon-down"
        :class="isShow === false ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
      ></h-icon> -->
      <span class="lock-code-word">{{
        isShow === false ? "显示代码" : "隐藏代码"
      }}</span>
    </div>
  </div>
</template>

<script>
import mixin from "./mixin";

export default {
  alias: 'ModuleCode',
  name: 'ModuleCode',
  mixins: [mixin],
  props: {
    codeDesc: {
      type: String,
      default: "",
    },
    codeStr: {
      type: String,
      default: "",
    },
    showToggle: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

<style lang="scss">
@import "./index.scss"
</style>